<template>
	<view class="change">
		<!-- <form @submit="formSubmit"> -->
		<view class="warp">
			<!-- 反馈类型 -->
			<!-- <view class="feedback">
					<view class="feedback_top">反馈类型</view>
					<view class="feedback_reason">
						<view class="margin-top-xs text-cut" v-for="(item, index) in types" :key="index" :class="item.id == active ? 'active' : ''" @click="reason(item.id)">
							{{ item.title }}
						</view>
					</view>
				</view>
				<view class="lines"></view> -->
			<!-- 反馈内容 -->
			<view class="feedback_content">
				<view class="feedback_content_top">反馈内容</view>
				<view class="contents">
					<textarea class="textbox" name="body" v-model="body" maxlength="200" placeholder="请输入意见或反馈" placeholder-style="font-size:28rpx" @input="descInput" />
				</view>
				<view class="schedule">{{ remnant }}/200</view>
			</view>

			<!-- 上传图片 -->
			<view class="up_pict_box">
				<view class="everbox" v-for="(item, index) in imgbox" :key="index">
					<view class="everpic"><image :src="item" style="width: 200upx; height: 200upx;" mode=""></image></view>
					<!-- 右上角的红叉 -->
					<view class="redx" @tap="delateimg(index)"><image src="../../../static/xs_icon/hongx.png" style="width: 36upx;height: 36upx;"></image></view>
				</view>

				<view v-show="imgbox.length < 9" class="everbox" @tap="upimg">
					<view class="everpic"><image src="../../../static/xs_icon/add.png" style="width: 200upx; height: 200upx;" mode="aspectFill"></image></view>
				</view>
			</view>
			<!-- 请输入您的手机号 -->
			<view class="lines"></view>
			<view class="call-method">
				<view class="call-title">请留下您的联系方式</view>
				<input class="call-me" maxlength="11" type="number" value="" v-model="contact" placeholder="请输入您的手机号/QQ号" />
			</view>
			<!-- <view class="xian" style="margin-top: 30upx;"></view> -->
		</view>
		<!-- </form> -->
		<!-- 提交按钮 -->
		<view class="sub-but" @tap="submitfeedback">提交</view>
		<view class="loading-box"><u-loading :show="lodingone" color="#FFBA4B" size="70"></u-loading></view>
		<view style="height: 100upx;"></view>

		<successPop :showPopup="showPopup" :showTitle="'提交成功'" @confirm="determine"></successPop>
	</view>
</template>

<script>
import { validate } from '@/common/utils/index';
// import { UploadImg } from '@/common/utils/upload-image.js'
import { UploadImage } from '@/common/utils/index';
import { UPLOAD_IMAGE_URL } from '@/common/config.js';
import successPop from '@/components/xs-components/success-pop/success-pop.vue';
var _self;
export default {
	components: { successPop },
	data() {
		return {
			// 反馈类型
			types: [],
			active: 1,
			imgpath: [],
			body: '',
			contact: '', // 联系方式
			imgbox: [], //本地图片地址
			imgid: [], //图片网上id
			send: false, //默认为false
			remnant: 0,
			lodingone: false, //加载中

			showPopup: false
		};
	},
	computed: {
		bodyLen() {
			return this.body.length;
		}
	},
	onLoad() {
		_self = this;
		// this.get_feedback_type();
	},

	methods: {
		reason(type) {
			this.active = type;
		},
		//字数
		descInput: function(e) {
			// console.log(e.detail.value)
			this.remnant = this.body.length;
		},
		//提交反馈
		submitfeedback() {
			if (this.body == '') {
				this.$message.info('反馈内容不能为空');
			} else {
				if (this.imgbox.length != this.imgid.length) {
					this.$message.info('图片正在上传中稍等一下吧');
				} else {
					if (this.contact == '') return this.$message.info('既然来了，就留下您的联系方式吧');
					if (this.send == false) {
						this.lodingone = true;
						this.send = true;
						this.$api
							.post(global.apiUrls.feedbackAdd, {
								type: this.active,
								body: this.body,
								thumb: this.imgid.toString(),
								contact: this.contact
							})
							.then(res => {
								// console.log(this.score)
								console.log(res.data);
								if (res.data.code == 1) {
									// this.$message.info('反馈成功');
									this.showPopup  = true;
									this.lodingone = false;
									// setTimeout(() => {
									// 	this.$urouter.redirectTo('/pages/my/setting');
									// }, 1000);
								} else {
									this.$message.info('诶呀呀,没成功,再试试吧');
									this.send = false;
									this.lodingone = false;
								}
							})
							.catch(err => {
								this.lodingone = false;
								// console.log(res)
							});
					}
				}
			}
		},
		//获取反馈类型
		get_feedback_type() {
			this.lodingone = true;
			this.$api
				.post(global.apiUrls.feedbacktype, {})
				.then(res => {
					// console.log(this.score)
					console.log(res.data);
					if (res.data.code == 1) {
						this.types = res.data.data;
						this.lodingone = false;
					} else {
						this.lodingone = false;
					}
				})
				.catch(err => {
					this.lodingone = false;
					// console.log(res)
				});
		},
		//删除图片
		delateimg(index) {
			console.log(index);
			this.imgbox.splice(index, 1);
			this.imgid.splice(index, 1);
		},
		//上传图片
		upimg() {
			let _this = this;
			var count = 9 - _this.imgbox.length * 1;
			uni.chooseImage({
				count: count,
				success: chooseImageRes => {
					const tempFilePaths = chooseImageRes.tempFilePaths;
					tempFilePaths.forEach(function(item, index) {
						uni.uploadFile({
							url: UPLOAD_IMAGE_URL, //仅为示例，非真实的接口地址
							filePath: tempFilePaths[index],
							name: 'file',
							success: uploadFileRes => {
								_this.imgbox.push(tempFilePaths[index]);
								_this.imgid.push(JSON.parse(uploadFileRes.data).data[0].id)
							},
							fail: err => {
								console.log(2);
								console.log(err);
							}
						});
					});
				}
			});
		},
		//
		determine(e) {
			this.showPopup = e;
			setTimeout(() => {
				uni.navigateBack();
			}, 500);
		}
	}
};
</script>

<style lang="scss">
@import './feedback.scss';
</style>
